import {ddGetAuth} from '@/api/dd'
import useDrawer from '@/hooks/antDesignVue/useDraw'
import useTabs from '@/hooks/antDesignVue/useTabs'
import {useLoading} from '@/hooks/loading'
import useLog from '@/hooks/pm/log'
import useGlobalAPI from '@/hooks/useGlobalAPI'
import {ddPreview} from '@/libs/dingding'
import {unReplaceBreak} from '@/libs/toolkit'
import {defineComponent, computed, watch, onMounted} from 'vue'
import {CnMediumP, CnNormalP, CnNormalSpan} from '../text'
export function makeProperty2Str(makeProperty: 'edit' | 'add' | 'delete') {
  switch (makeProperty) {
    case 'add':
      return '添加'
    case 'edit':
      return '修改'
    case 'delete':
      return '删除'
    default:
      return ''
  }
}
const PmLogTimeLine = defineComponent({
  props: {
    pmId: {
      type: Number,
      required: true
    }
  },
  setup(props, ctx) {
    const {store} = useGlobalAPI()
    const {logDataList, updateLogDataList, getLogDataList} = useLog()
    const {loading, startLoading, closeLoading} = useLoading()
    const {visible, title, placement, closeDrawer, openDrawer, defaultValue, setDefaultValue} =
      useDrawer<PmLog.LogData>({
        title: '操作记录',
        placement: 'bottom'
      })

    const {activeKey, changeActiveKey} = useTabs<number>({activeKey: 0})

    const columns: CColumn<PmLog.PmLogMakeData & {makeProperty: string}>[] = [
      {
        title: '名称',
        dataIndex: 'makeDataName'
      },
      {
        title: '操作类型',
        dataIndex: 'makeProperty'
      },
      {
        title: '操作后',
        dataIndex: 'newData'
      },
      {
        title: '操作前',
        dataIndex: 'oldData'
      }
    ]

    const loginUserInfo = computed(() => store.getters['dingding/ddUserInfo'])

    watch(
      () => props.pmId,
      n => {
        startLoading()
        getLogDataList({
          pmId: n,
          isGetAllUserInfo: true,
          isUpdateLogDataList: true,
          success(data) {
            closeLoading()
          },
          fail() {
            closeLoading()
          }
        })
      },
      {immediate: true}
    )

    onMounted(() => {})

    return () => (
      <div class='mt-24'>
        <a-spin spinning={loading.value}>
          <CnMediumP class='my-12 text-16 font-bold'>记录</CnMediumP>
          <a-timeline>
            {logDataList.value.map(logData => (
              <a-timeline-item>
                <CnMediumP class='text-12 text-info'>{logData.createTime}</CnMediumP>
                <div class='flex items-center gap-x-8'>
                  <div class='flex items-center gap-x-8'>
                    <img src={logData.avatar || ''} class='w-30 h-30 rounded-full'></img>
                    <CnMediumP class=' text-12'>{logData.makeUserName}</CnMediumP>
                  </div>
                  <CnMediumP class='text-primary text-12'>{logData.makeProgressName}</CnMediumP>
                </div>
                {logData.makeContent
                  ? [
                      <CnNormalP
                        class='w-200 ml-38 p-8 rounded-4 bg-white text-12'
                        style={{
                          whiteSpace: 'break-spaces'
                        }}
                      >
                        {unReplaceBreak(logData.makeContent + '')}
                      </CnNormalP>,
                      logData.pmLogAnnexList
                        ? logData.pmLogAnnexList.map(item => (
                            <div>
                              <CnNormalP class='ml-38 p-8 rounded-4 text-primary text-12'>
                                {item.annexFileName}
                                <CnNormalSpan
                                  class='ml-16 text-primary pb-4 cursor-pointer'
                                  onClick={() => {
                                    ddGetAuth({userDDId: loginUserInfo.value.userId})
                                      .then(res => {
                                        ddPreview({
                                          spaceId: item.annexFileSpaceId,
                                          fileId: item.annexFileId,
                                          fileName: item.annexFileName,
                                          fileSize: item.annexFileSize,
                                          fileType: item.annexFileExtension
                                        })
                                      })
                                      .catch(err => {})
                                  }}
                                >
                                  <i class='iconfont icon-fangdajing text-14'></i>
                                </CnNormalSpan>
                              </CnNormalP>
                            </div>
                          ))
                        : null
                    ]
                  : logData.pmLogMakeList
                  ? [
                      <CnNormalP class='w-200 ml-38 p-8 rounded-4 bg-white'>
                        {logData.pmLogMakeList.map(item => (
                          <CnNormalP class='text-12'>
                            {`${makeProperty2Str(item.makeProperty)}:${item.makeTargetName}`}
                          </CnNormalP>
                        ))}
                      </CnNormalP>,
                      <CnNormalP class='w-200 ml-38 p-8 rounded-4 '>
                        <CnNormalSpan
                          class='text-primary hover:border-b-1 border-primary cursor-pointer  text-12'
                          onClick={() => {
                            console.log('点击日志的数据：', logData)
                            setDefaultValue(logData)
                            changeActiveKey(0)
                            openDrawer()
                          }}
                        >
                          查看详情
                        </CnNormalSpan>
                      </CnNormalP>
                    ]
                  : logData.pmLogAnnexList
                  ? [
                      logData.pmLogAnnexList.map(item => (
                        <div>
                          <CnNormalP
                            class='ml-38 p-8 rounded-4 text-primary '
                            onClick={() => {
                              ddGetAuth({userDDId: loginUserInfo.value.userId})
                                .then(res => {
                                  ddPreview({
                                    spaceId: item.annexFileSpaceId,
                                    fileId: item.annexFileId,
                                    fileName: item.annexFileName,
                                    fileSize: item.annexFileSize,
                                    fileType: item.annexFileExtension
                                  })
                                })
                                .catch(err => {})
                            }}
                          >
                            <span class='cursor-pointer'>{item.annexFileName}</span>
                            <CnNormalSpan class='ml-16 text-primary pb-4  cursor-pointer text-12'>
                              <i class='iconfont icon-fangdajing  text-14'></i>
                            </CnNormalSpan>
                          </CnNormalP>
                        </div>
                      ))
                    ]
                  : null}
              </a-timeline-item>
            ))}
          </a-timeline>

          <a-drawer
            height={700}
            v-model={[visible.value, 'visible']}
            title={title.value}
            placement={placement.value}
            onClose={closeDrawer}
          >
            <div class='p-8'>
              <a-tabs v-model={[activeKey.value, 'activeKey']}>
                {defaultValue.value &&
                  defaultValue.value.pmLogMakeList.map((item, idx) => (
                    <a-tab-pane
                      key={idx}
                      // tab={`${makeProperty2Str(item.makeProperty)}-${item.makeTargetName}`}
                      tab={item.makeTargetName}
                    >
                      <a-table
                        pagination={false}
                        columns={columns}
                        dataSource={item.pmLogMakeDataList.map(makeData =>
                          Object.assign(makeData, {
                            makeProperty: makeProperty2Str(item.makeProperty)
                          })
                        )}
                      ></a-table>
                    </a-tab-pane>
                  ))}
              </a-tabs>
            </div>
          </a-drawer>
        </a-spin>
      </div>
    )
  }
})
export default PmLogTimeLine
